<template>
  <div id="userInfo">
    <a-button style="margin-left: 30px; min-width: 88px" @click="back"
      >返回
    </a-button>
    <a-card :style="{ margin: '20px' }" title="个人信息">
      <div style="text-align: center">
        <a-spin dot :hide-icon="!isLoadingAvatar" />
      </div>
      <template #extra>
        <a-popconfirm content="确认修改？" @ok="updateUserInfo">
          <a-button type="outline" :loading="!isLoadingButton"
            >提交修改
          </a-button>
        </a-popconfirm>
      </template>
      <a-avatar :image-url="userForm.userAvatar" :size="100">
        <template #trigger-icon>
          <IconEdit />
        </template>
      </a-avatar>
      <a-divider />
      <div style="text-align: center">
        <a-spin dot :hide-icon="!isLoadingInfo" />
      </div>
      <a-form
        style="max-width: 480px; margin-top: 30px"
        label-align="left"
        auto-label-width
      >
        <div>
          <a-space>
            <a-form-item field="userId" label="ID：">
              <a-input
                style="min-width: 200px"
                v-model="userForm.id"
                :disabled="true"
              />
            </a-form-item>
          </a-space>
        </div>
        <div>
          <a-space>
            <a-form-item field="userAccount" label="账号：">
              <a-input
                style="min-width: 200px"
                v-model="userForm.userAccount"
                :disabled="true"
              />
            </a-form-item>
          </a-space>
        </div>
        <div>
          <a-space>
            <a-form-item field="userRole" label="用户角色：">
              <a-input
                style="min-width: 200px"
                v-model="userForm.userRole"
                :disabled="true"
              />
            </a-form-item>
          </a-space>
        </div>
        <a-divider />
        <div>
          <a-space>
            <a-form-item field="userName" label="用户名：">
              <a-input style="min-width: 200px" v-model="userForm.userName" />
            </a-form-item>
          </a-space>
        </div>
        <div>
          <a-space>
            <a-form-item field="userRole" label="用户简介：">
              <a-textarea
                v-model="userForm.userProfile"
                placeholder="Please enter something"
                allow-clear
              />
            </a-form-item>
          </a-space>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { UserControllerService, UserVO } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";

const router = useRouter();
const isLoadingAvatar = ref(true);
const isLoadingInfo = ref(true);
const isLoadingButton = ref(true);
onMounted(() => {
  loadData();
});

const userForm = reactive({
  userAvatar: "",
  userName: "",
  userAccount: "",
  userRole: "",
  userProfile: "",
  id: 0,
});

const loadData = async () => {
  const res = await UserControllerService.getLoginUserUsingGet();
  isLoadingAvatar.value = false;
  userForm.userAvatar = res.data?.userAvatar as string;
  isLoadingInfo.value = false;
  userForm.id = res.data?.id as number;
  userForm.userName = res.data?.userName as string;
  userForm.userAccount = res.data?.userAccount as string;
  userForm.userProfile = res.data?.userProfile as string;
  userForm.userRole = res.data?.userRole as string;
};

const updateUserInfo = async () => {
  isLoadingButton.value = false;
  const res = await UserControllerService.updateMyUserUsingPost(userForm);
  if (res.code === 0) {
    isLoadingButton.value = true;
    message.success("修改成功！");
    await loadData();
  } else {
    message.error("修改失败！", res.data);
    isLoadingButton.value = true;
  }
};

const back = () => {
  router.back();
};
</script>

<style>
#userInfo {
  padding-left: 100px;
  padding-top: 50px;
  padding-right: 100px;
  padding-bottom: 400px;
  background-color: #fffeee;
}
</style>
